<template>
  <div class="realTime" style="padding: 0; position: relative">
    <!--地图 B-->
    <Map ref="baseMap" v-on:ysf="acceptysy"></Map>
    <!--地图 E-->

    <div class="list"
      style="width: 25%;height: calc(100% - 0.32rem);position: absolute;top: 0.16rem;right: 0.16rem;z-index: 99;">
      <div class="videoList" style="display: block">
        <div class="videoList_title">
          <!--<span class='icon iconfont icon-chazhaobiaodanliebiao'></span>-->
          <span>设备名称</span>
        </div>
        <div class="videoList_content">
          <div class="TDlist">
            <table>
              <thead>
                <tr>
                  <th>卡口点</th>
                  <th>卡口类型</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(t, i) in tongdao" :class="i + 'TD'">
                  <td>{{ t.name }}</td>
                  <td>枪机</td>
                  <td @click="openplayer(t, i)"> <span>查看</span> </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

    <div class="ysfPop" v-if="isYsf">
      <div class="ysfClose">
        <img src="/static/img/icon/close.png" alt="" @click="(isYsf = false), (player = null)" />
      </div>
      <div class="videoWindow" id="playWnd" style="height: 80%; overflow: hidden"></div>
    </div>



  </div>
</template>
<script>
import http from "../utils/http";
import api from "../utils/api";
import Map from './Map.vue'

export default {
  components: { Map },
  data() {
    return {
      areaId: "",
      form: {},
      tongdao: [],
      page: {},
      accessToken: "",
      channelNo: "", //通道号
      //        deviceSerial: 'D55908472',//序列号
      deviceSerial: "", //序列号
      direction: "8",
      speed: "2",
      yanzhengma: "",
      SRC: "",
      clickId: "",
      pageSize: "9",
      pageNum: 0,
      showList: true,
      name: "",
      num: "",
      isYsf: false,
      player: null,
      iseditbox: false,
    }
  },
  created() {
    this.areaId = window.sessionStorage.getItem("areaId");
    this.getysy();
  },
  mounted() {
    // this.kongzhi()
  },
  methods: {
    success(text) {
      this.$message({
        showClose: true,
        message: text,
        type: 'success',
      });
    },
    warn(text) {
      this.$message({
        showClose: true,
        message: text,
        type: 'warning'
      });
    },
    //-----
    openplayer(e, i) {
      let _then = this;
      let promise = new Promise(function (resolve, reject) {
        _then.isYsf = true;
        resolve();
      });
      promise.then((res) => {
        _then.lookTD(e, i);
      });
    },
    acceptysy(data) {
      let _then = this;
      let promise = new Promise(function (resolve, reject) {
        _then.isYsf = true;
        resolve();
      });
      promise.then((res) => {
        _then.lookTD(data.item, data.index);
      });
    },
    getysy() {
      let vm = this;
      vm.$axios
        .get(api.accessInfo + "?areaId=" + this.areaId)
        .then(function (response) {
          let xu = [],
            yan = [];
          if (response.data.code == 200) {
            for (let k in response.data.data.codeMap) {
              xu.push(k);
              yan.push(response.data.data.codeMap[k]);
            }
            vm.accessToken = response.data.data.token;
            vm.yanzhengma = yan;
            vm.deviceSerial = xu;
            vm.getPage();
          } else {
            vm.$message({
              message: response.data.message,
              type: "error",
              duration: "1000",
            });
          }
        })
        .catch(function (error) { });
    },
    getPage() {
      var vm = this;
      (async function () {
        let res = await http.get(
          api.gateList +
          "?areaId=" +
          vm.areaId
        );
        if (res.data.code == 200) {
          vm.tongdao = res.data.data;
          vm.page = res.data.data;
          var arr = vm.tongdao[0].uniqueInfo.split("-");
          vm.deviceSerial = arr[0];
          vm.channelNo = arr[1];
          vm.name = vm.tongdao[0].name;
          vm.num = vm.channelNo;
          vm.SRC =
            "https://open.ys7.com/ezopen/h5/iframe?url=ezopen://" +
            vm.yanzhengma +
            "@open.ys7.com/" +
            vm.deviceSerial +
            "/" +
            vm.channelNo +
            ".hd.live" +
            "&autoplay=1" +
            "&accessToken=" +
            vm.accessToken;

          let point = [];
          res.data.data.forEach((e, x) => {
            let z = {
              id: e.id,
              name: e.name,
              // name: "",
              borderColor: "",
              fillColor: "",
              iconSrc:
                "/static/img/map/shipinjiankong_anchor_bottom_center.png",
              data: {
                type: '森林防火',
                item: e,
                index: x,
              },
              geojson: { coordinates: [e.lon, e.lat], type: "Point" },
            };

            point.push(z);
          });

          if (point.length > 0) {
            vm.$refs.baseMap.previewshape(point, "ysyjkd");
          }
        } else {
          vm.$message({
            message: res.data.message,
            type: "error",
            duration: "1000",
          });
        }
      })();
    },
    lookTD(e, i) {
      let yzm = this.yanzhengma,
        token = this.accessToken,
        arr = e.uniqueInfo.split("-"),
        xlh = arr[0],
        tdh = arr[1];
      this.player = new EZUIKit.EZUIKitPlayer({
        autoplay: true,
        id: "playWnd",
        accessToken: token,
        url:
          "ezopen://" + yzm + "@open.ys7.com/" + xlh + "/" + tdh + ".hd.live",
        template: "theme", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
        audio: 0, // 是否默认开启声音 0 - 关闭 1 - 开启
        width: "100%",
        height: "100%",
      });
      this.player.stop();
      // 切换为直播
      this.player.play();
    },
    handleCurrentChange(val) {
      this.pageNum = val - 1;
      this.getPage();
    },
  },
  beforeRouteLeave(to, from, next) {
    this.player = null;
    next();
  },
};
</script>
<style scoped>
@import "../../static/css/realTime/realTime.css";
</style>
<style>
.TDlist .el-collapse-item__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 48px;
  line-height: 48px;
  background-color: #fff;
  color: #303133;
  cursor: pointer;
  border-bottom: 1px solid #ebeef5;
  font-size: 18px;
  font-weight: 500;
  -webkit-transition: border-bottom-color 0.3s;
  transition: border-bottom-color 0.3s;
  outline: 0;
}

.TDbackground {
  background-color: #00cc46;
  color: #fff;
  /*border-left: 0.05rem solid #1FB456;*/
}

.borColor {
  border: 0.03rem solid #00cc46 !important;
}

/*分页 B*/
#change_color.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #00cc46 !important;
  color: #fff;
}

iframe {
  height: 100% !important;
}
</style>
